<!DOCTYPE html>
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Demo Page for jQuery UI selectmenu</title>
	
	<link type="text/css" href="../../themes/base/jquery.ui.core.css" rel="stylesheet" />
	<link type="text/css" href="../../themes/base/jquery.ui.theme.css" rel="stylesheet" />
	<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.8.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
	
	<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>

	<style type="text/css">
		/* demo styles */
		body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
		fieldset { border:0; }	
		label,select,.ui-select-menu { float: left; margin-right: 10px; }
		select { width: 250px; }
		.ui-selectmenu-menu li a, .ui-selectmenu-status { padding: 0.3em 2em; }
					
		/* select with custom icons */
		body a.customicons { height: 2.8em;}
		body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
		body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
		body .video .ui-selectmenu-item-icon { background: url(images/24-video-square.png) 0 0 no-repeat; }
		body .podcast .ui-selectmenu-item-icon { background: url(images/24-podcast-square.png) 0 0 no-repeat; }
		body .rss .ui-selectmenu-item-icon { background: url(images/24-rss-square.png) 0 0 no-repeat; }
		
		/* select with CSS avatar icons */
		option.css-avatar { background-repeat: no-repeat !important; padding-left: 20px; }
		
		/* select with big avatar icons */
		a.avatar-big { height: 5em; }
		.avatar-big .ui-selectmenu-item-icon { height: 50px; width: 50px; }		
		.ui-selectmenu-menu li.avatar-big a, a.avatar-big span.ui-selectmenu-status { padding-left: 5em !important; height: 50px; }
	</style>
	<script type="text/javascript">	
		$(function(){
			$('select#files').selectmenu({
				style:'popup', 
				icons: [
					{find: '.script', icon: 'ui-icon-script'},
					{find: '.image', icon: 'ui-icon-image'}
				]
			});	
			
			$('select#filesB').selectmenu({
				style:'popup', 
				icons: [
					{find: '.video'},
					{find: '.podcast'},
					{find: '.rss'}
				]
			});			
			
			$('select#peopleA').selectmenu({
				icons: [
					{find: '.avatar'}
				],
				bgImage: function() {
					return 'url(' + $(this).attr("title") + ')';
				}
			});

			$('select#peopleB').selectmenu({
				icons: [
					{find: '.css-avatar'}
				],
				bgImage: function() {
					return $(this).css("background-image");
				}
			});

			$('select#peopleC').selectmenu({
				icons: [
					{find: '.avatar-big'}
				],
				bgImage: function() {
					return 'url(' + $(this).attr("title") + ')';
				},
				menuWidth: "300px"
			});
		});
		
		//a custom format option callback
		var addressFormatting = function(text){
			var newText = text;
			//array of find replaces
			var findreps = [
				{find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
				{find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
				{find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
				{find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
				{find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
			];
			
			for(var i in findreps){
				newText = newText.replace(findreps[i].find, findreps[i].rep);
			}
			return newText;
		}		
	</script>
</head>
<body>
	<form action="#">
		<h2>Default: "popup" Style with framework icons</h2>
		<fieldset>
			<label for="files">Select a File:</label>
			<select name="files" id="files">
				<option value="jquery" class="script">jQuery.js</option>
				<option value="jquerylogo" class="image">jQuery Logo</option>
				<option value="jqueryui" class="script">ui.jQuery.js</option>
				<option value="jqueryuilogo" selected="selected" class="image">jQuery UI Logo</option>
				<option value="somefile">Some unknown file</option>
			</select>
		</fieldset>
		<h2>Default: "popup" Style with custom icon images</h2>
		<fieldset>
			<label for="filesB">Select a File:</label>
			<select name="filesB" id="filesB" class="customicons">
				<option value="mypodcast" class="podcast">John Resig Podcast</option>
				<option value="myvideo" class="video">Scott Gonzales Video</option>
				<option value="myrss" class="rss">jQuery RSS XML</option>
			</select>
		</fieldset>		
		
		<h2>"dropdown" Style with custom avatar 16x16 images</h2>
		<fieldset>
			<label for="peopleA">Select a Person:</label>
			<select name="peopleA" id="peopleA">
				<option value="1" class="avatar" title="http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16">John Resig</option>
				<option value="2" class="avatar" title="http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16">Tauren Mills</option>
				<option value="3" class="avatar" title="http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16">Jane Doe</option>
			</select>
		</fieldset>
		
		<h2>"dropdown" Style with custom avatar 16x16 images as CSS background</h2>
		<fieldset>
			<label for="peopleB">Select a Person:</label>
			<select name="peopleB" id="peopleB">
				<option value="1" class="css-avatar" style="background-image: url(http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16);">John Resig</option>
				<option value="2" class="css-avatar" style="background-image: url(http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16);">Tauren Mills</option>
				<option value="3" class="css-avatar" style="background-image: url(http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16);">Jane Doe</option>
			</select>
		</fieldset>
		
		<h2>"dropdown" Style with custom avatar 50x50 images</h2>
		<fieldset>
			<label for="peopleC">Select an Address:</label>
			<select name="peopleC" id="peopleC">
				<option class="avatar-big" title="http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=50">John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
				<option selected="selected" class="avatar-big" title="http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=50">Jane Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
				<option class="avatar-big" title="http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=50">Joseph Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
				<option class="avatar-big" title="http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=50">Mad Doe Kiiid - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
			</select>
		</fieldset>
	</form>
</body>
</html>